<template>
	<view>
		<view class="head-img-box">
		</view>

		<view class="user-box">
			<view class="head-img">
				<image :src="userinfo.head"></image>
			</view>
			<view class="head-nick">
				<view style="font-size: 36upx; font-weight: 600">
					{{ userinfo.nickname?userinfo.nickname:'未登入' }}
				</view>
				<view class="phone">
					电话 :{{ userinfo.phone?userinfo.phone:'暂未绑定' }}
				</view>
			</view>

			<view class="head-setting">
				<image src="https://www.huangjinya.top/xcx/shezhi.png" @click="openUser">
			</view>
		</view>

		<view class="order-box">
			<view class="title-box">
				<view class="title">订单管理</view>
				<view class="btn text-base text-color-grey" @click="goToOrderList(0)">全部订单</view>
			</view>
			<view class="content-box">
				<uni-grid :column="4" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in order_list" :index="index" :key="index">
						<view class="grid-item-box" @click="goToOrderList(item.status)">
							<uni-badge :text="item.num" absolute="rightTop">
								<image :src="item.icon" />
								<view class="text">{{ item.text }}</view>
							</uni-badge>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

		<view class="meun-box">
			<view class="title-box">
				<view class="title">更多服务</view>
			</view>
			<view class="content-box">
				<uni-grid :column="4" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in meun_list" :index="index" :key="index">
						<view class="grid-item-box" style="margin-bottom: 20px;" @click="goToOther(item.type)">
							<image :src="item.icon" />
							<view class="text">{{ item.text }}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

		<view class="foot">
			<view>版本：V0.0.2</view>
			<view style="margin-top:10upx">湖州黄金芽品牌管理有限公司</view>
		</view>

		<loadingModel ref="loading" />
	</view>
</template>

<script>
	import loadingModel from '@/components/loading-model/loading-model.vue';
	export default {
		components: {
			loadingModel
		},
		data() {
			return {
				meun_list: [{
					text: '我要合作',
					type: '',
					icon: 'https://www.huangjinya.cn/xcx/hezuo.png',
				}, {
					text: '收货地址',
					type: 'address',
					icon: 'https://www.huangjinya.cn/xcx/dizhi.png',
				}, {
					text: '品牌授权',
					type: '',
					icon: 'https://www.huangjinya.cn/xcx/ppsq.png',
				}, {
					text: '优惠券',
					type: '',
					icon: 'https://www.huangjinya.cn/xcx/juan.png',
				}, {
					text: '产品查询',
					type: 'serial',
					icon: 'https://www.huangjinya.cn/xcx/sousuo.png',
				}],
				order_list: [{
						text: '待支付',
						icon: 'https://www.huangjinya.cn/xcx/daizhifu.png',
						num: 0,
						status: 1,
					},
					{
						text: '待发货',
						icon: 'https://www.huangjinya.cn/xcx/daifahuo.png',
						num: 0,
						status: 3,
					},
					{
						text: '待验收',
						icon: 'https://www.huangjinya.cn/xcx/daiyanshou.png',
						num: 0,
						status: 4,
					},
					{
						text: '已完成',
						icon: 'https://www.huangjinya.cn/xcx/yiwancheng.png',
						num: 0,
						status: 5,
					},
				],
				userinfo: {},
			}
		},

		onShow() {
			this.getMine()
		},
		methods: {
			getMine() {
				let that = this
				this.$myRequest('mine/mine', {}).then((res) => {
					this.userinfo = res.data
					this.order_list.forEach(function(element, index) {
						res.data.order_total.forEach(function(element1) {
							if (element.status == element1.status) {
								that.order_list[index].num = element1.num
							}
						})
					})
				})
			},
			goToOrderList: function(status) {

				this.$Router.push({
					path: '/pages/order/order',
					query: {
						status: status,
					},
				})
			},
			goToOther: function(type) {

				if (!type) {
					uni.showToast({
						icon: 'error',
						title: "正在开发中",
					});
					return false;
				}
				if (type == 'address') {

					this.$Router.push({
						path: "/pages/address/address",
						query: {
							is_select: false
						}
					})
				}
				if (type == 'serial') {

					this.$Router.push({
						path: "/pages/serial/serial"
					})
				}
			},
			openUser() {
				this.$Router.push({
					path: '/pages/user/user'
				})
			},
			waitOpen() {
				uni.showToast({
					title: '正在开发中',
					icon: 'error'
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	i {
		font-size: 20px;
		color: #666;
		margin-bottom: 10upx;
	}

	.head-img-box {
		margin: auto 40upx 40upx;

		image {
			width: 100%;
		}
	}

	.user-box {
		display: flex;
		margin: 40upx 30upx;
		margin-top: 80upx;
		padding: 40upx;
		background-color: #fff;
		border-radius: 16upx;
		box-shadow: darkgrey 0px 0px 30px 5px;
		align-items: center;

		.head-img {
			background-color: #fff;
			width: 100upx;
			height: 100upx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.head-nick {
			flex: 1;
			padding-left: 30upx;

			.phone {
				font-size: 26upx;
				color: #999;
				margin-top: 10upx;
			}
		}

		.head-setting {
			image {
				width: 40upx;
				height: 40upx;
			}
		}
	}

	.order-box {
		border-radius: 16upx;
		position: relative;
		margin: 40upx 30upx;
		padding: 30upx;
		background-color: #fff;

		.title-box {
			padding: 0 0 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e9e6e6;
			font-size: 32upx;
		}

		.content-box {
			text-align: center;
			margin-top: 40upx;
			font-size: 28upx;

			image {
				width: 60upx;
				height: 60upx;
			}
		}
	}

	.meun-box {
		border-radius: 16upx;
		position: relative;
		margin: 40upx 30upx;
		padding: 30upx;
		background-color: #fff;
		text-align: center;

		.title-box {
			padding: 0 0 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e9e6e6;
			font-size: 32upx;
		}

		.content-box {
			text-align: center;
			margin-top: 40upx;
			font-size: 28upx;

			image {
				width: 60upx;
				height: 60upx;
			}
		}
	}

	.wxinfo-popup {
		width: 300upx;
		padding: 20upx;
		background-color: #fff;
	}

	.foot {
		width: 100%;
		position: relative;
		top: 30px;
		text-align: center;
		font-size: 22upx;
		color: #999;
	}
</style>